<template>
	<view>
		<!-- 搜索框 -->
		<view class="search">
		  <!-- 图标 -->
		  <image src="https://s1.ax1x.com/2023/03/29/ppcMaG9.png" mode="widthFix"></image>
		  <!-- 输入框 -->
		  <input type="text" placeholder="搜索食物营养/热量" class="search_ipt">
		</view>
		<!-- 搜索标题 -->
		<view class="title">
			搜索结果
		</view>
		<!-- 数据列表 -->
		<view class="list">
			<image src="https://img.js.design/assets/img/641e67a1f92e222c055c718d.png#7435650f945e72fdf01939d7618a1f75" mode="" class="img1"></image>
			<view @click="GoDetails" style="display: flex;justify-content: space-between;flex-direction: column;height: 100rpx;margin-left: -120rpx;">
				<view class="title1">
					{{name}}
				</view>
				<view class="title2">
					共502克食物：<text style="color: rgba(255, 121, 83, 1);">489</text>千卡
				</view>
			</view>
			
			<image src="https://s1.ax1x.com/2023/05/08/p9032Os.png" mode=""
				style="width: 40rpx;height: 40rpx;padding: 36rpx;">
			</image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'全麦鲜蔬鸡蛋三明治'
			}
		},
		methods: {
			GoDetails(){
				uni.navigateTo({
					url:`../../../components/Details/Details?title=${this.name}`,
					fail: (err) => {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	// 搜索框
	.search {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  width: 560rpx;
	  height: 80rpx;
	  margin: 0 auto;
	  margin-top: 20rpx;
	  border-radius: 30rpx;
	  border: 2px solid rgba(211, 187, 170, 1);
	  background: rgba(204, 204, 204, 0);
	
	  image {
	    width: 50rpx;
	    height: 50rpx;
	    margin: 0 20rpx;
	  }
	
	  .search_ipt {
	    width: 90%;
	    height: 100%;
	    font-size: 28rpx;
	    color: rgba(211, 187, 170, 1);
	  }
	
	  .input-placeholder {
	    color: rgba(211, 187, 170, 1);
	  }
	}
	// 标题
	.title{
		font-size: 36rpx;
		color: rgba(73, 69, 75, 1);
		font-family: '思源黑体';
		margin-top:56rpx;
		margin-left: 32rpx;
	}
	// 列表
	.list{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 56rpx;
		.title1{
			font-size: 28rpx;
			color: rgba(73, 69, 75, 1);
			font-family: '思源黑体';
		}
		.title2{
			font-size: 28rpx;
			color: rgba(166, 166, 166, 1);
			font-family: '思源黑体';
		}
		.img1{
			width: 100rpx;
			height: 100rpx;
			border-radius: 16rpx;
			margin-left: 44rpx;
			// margin-top: 38rpx;
		}
	}
</style>
